<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <ele></ele>
    <ele>
        <p>slot的内容</p>
    </ele>
</div>
<script>
    Vue.component('ele',{
        data(){
            return{
                value:'',
                list:[]
            }
        },
        render:function(createElement){
            var _this=this
            console.log(this.list.length)
            if(this.list.length){
                var listNode=createElement('ul',this.list.map(item=>{
                    console.log(item)
                    return createElement('li',item)
                }))
                console.log(listNode)
            }else {
                var listNode=createElement('p','暂无聊天内容')
            }
            return createElement('div',[
                listNode,
                createElement('input',{
                    attrs:{
                        placeholder:'输入内容，按回车键发送'
                    },
                    style:{
                        width:'200px'
                    },
                    on:{
                        keyup(event){
                            if (event.keyCode!=13) return false
                            console.log(_this.list)
                            _this.list.push(event.target.value)
                            event.target.value=''
                        }
                    }
                })
            ])
        }
    })
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
</script>
</body>
</html>
